<template>
    <div class="main">
        <div class="bg2">
            <div class="bg">
                <div class="movebear"></div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">

</script>

<style scoped lang="scss">
.main {
    background-color: #333;
    position: relative;
    height: 100%;
}

.bg2 {
    position: absolute;
    height: 369px;
    width: 100%;
    bottom: 0;
    background: url(./images/bg2.png) repeat-x;
    background-size: calc(100% * 2) 100%;
    animation: bgmove2 60s linear infinite;
}

.bg {
    position: absolute;
    height: 300px;
    width: 100%;
    bottom: 0;
    background: url(./images/bg1.png) repeat-x;
    background-size: calc(100% * 2) 100%;
    animation: bgmove 30s linear infinite;
}

.movebear {
    position: absolute;
    height: 100px;
    width: 200px;
    bottom: 50px;
    background: url(./images/bear.png) no-repeat;
    animation: bear .8s steps(8) infinite, move 3s forwards;
}

@keyframes bear {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: -1600px 0;
    }
}

@keyframes move {
    0% {
        left: 0px;
    }

    100% {
        left: 50%;
        transform: translateX(-50%);
    }
}

@keyframes bgmove {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: calc(100% * 2) 0;
    }
}

@keyframes bgmove2 {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: calc(100% * 2) 0;
    }
}
</style>